<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-focus>
			<p v-color="bgColor">p元素 v-color</p>
		</div>
		<script>
			//focus为自定义的指令名称,只需要在使用的元素中,加上v-前缀形成指令结构(v-if)
			//如果自定义指令中,使用的驼峰命名规则 如:Vue.directive('cmdA',fucntion(){ }),在元素中应该: v-cmd-a
			//注册全局指令
			/* Vue.directive('focus', {
				//当绑定元素插入到DOM中,el为dom元素
				inserted: function(el) {
					//获得焦点
					el.focus();
				}
			}); */

			 Vue.directive('color', {
				/* 
				bind生命周期,只会调用一次,指令第一次绑定到元素是调用,在可以可以进行一次性的初始化设置
				el:当前指令绑定的dom元素
				binding:定义函数的形参,通过自定义的属性传递值,存在于bingding.value中*/

			bind: function(el, bingding) {
			//console.log(bingding.value.bkcolor); 
			el.style.backgroundColor = 'blue';
			}
			});

			let vm = new Vue({
				el: '#app',
				data: {
					bgColor: {
						bkcolor: 'red'
					}
				},
				directives: {
					color: {
						bind: function(el, bingding) {
							//console.log(bingding.value.bkcolor); 
							el.style.backgroundColor = bingding.value.bkcolor;
						}
					},
					focus: {
						inserted: function(el) {
							//获得焦点
							el.focus();
						}
					}
				}

			});
		</script>
	</body>
</html>
